<script> 
var config_answer_time = 60;
var time_downcount = config_answer_time;
var time_start = 3;
countdown ='';
var count_time = function(inn){
	console.log('count_time '+inn);
	if (inn > 0){
		$('#count-down').html(inn+"s");
	} 
	else {
		audio2.pause();
		audio5.play();
		$('#count-down').html("0s");
		if( !$('#main-page').hasClass('isAnswered') && !$('#main-page').hasClass('wait3s') ){
			$('#main-page').addClass('timeout');
			jConfirm('<center>Đã hết thời gian trả lời, phần chơi của bạn đã kết thúc<br/>Bạn có muốn trở về trang chủ không?</center>', 'Thông báo', function(r) {
			if(r == true)
			{
				window.location.assign("<?php echo $baseurl;?>account.html");
			}
			});
		}
		clearInterval(countdown);
	}
}

var count_start = function(inn){
	var tmm = 3;
	var start_interval = setInterval(function(){
	
		tmm--;console.log('time_downcount'+tmm);
		if (tmm > 0){
			$('#count-start').html(tmm);
			} else {
				$("#count-start").hide();
				clearInterval(start_interval);
			}
	},1000);
}

</script> 

<script>
// Source sound spielende.mp3
var audio0 = new Audio('public/theme/audio/spielende.mp3'); audio0.play(); // nhạc nền 
var audio1 = new Audio('public/theme/audio/wechsel_nach_stufe_2.mp3'); // bắt đầu
var audio2 = new Audio('public/theme/audio/telefonjoker_loop.mp3');  // chờ trả lời câu hỏi
var audio3 = new Audio('public/theme/audio/joker_1.mp3'); // tích vào trả lời
var audio4 = new Audio('public/theme/audio/auswahlrunde_ergebnisse.mp3'); //trả lời đúng
var audio5 = new Audio('public/theme/audio/wechsel_nach_stufe_3.mp3'); // hết giờ
var audio6 = new Audio('public/theme/audio/spielende_kandidat_geht.mp3'); //trả lời sai
</script>



<div id="statistic">
    <div class="true-quest">
        <span class="ico-quest"></span>
        <span id="ico-quest">Đúng 0</span>
    </div>
    <div class="true-time">
        <span class="ico-score"></span>
        <span id="ico-time">0</span>
    </div>
	<div class="countdown-time">
		<span id="count-down"></span>
	</div>
</div>
<h1 style="text-align: center;margin: 10px 0 5%">Gameshow truyền hình tương tác</h1>
<div id="intro">
	<time></time>
	<button type="submit" class="btn btn-start" id="container31">Bắt đầu</button>
</div>
<div id="count-start"></div>
<script>

</script>
<div id="main-page" style="display: none">
    <input type="hidden" id="verify" name="verify" value=""/>
    <div class="box-four">
        <div class="quest"></div>
        <div id="cauhoi">
            Đang chờ
        </div>
        <div id="dappan">
            <ul>
                <li><a href="#"><span class="ketqua" id="dapan1">Đang chờ</span></a></li>
                <li><a href="#"><span class="ketqua" id="dapan2">Đang chờ</span></a></li>
                <li><a href="#"><span class="ketqua" id="dapan3">Đang chờ</span></a></li>
                <li><a href="#"><span class="ketqua" id="dapan4">Đang chờ</span></a></li>
            </ul>
        </div>
    </div>
</div>
<script>
function stripslashes(str) {
            str=str.replace(/\\'/g,'\'');
            str=str.replace(/\\"/g,'"');
            str=str.replace(/\\0/g,'\0');
            str=str.replace(/\\\\/g,'\\');
            return str;
        }
$("#container31").click(function(){
	audio0.pause();
	audio1.play();
	//var newvar = countdown;
	//clearInterval(countdown);
	$('#count-start').html(time_start);
	count_start(time_start);
	sessionStorage.count = 0;
	$('#main-page').removeClass('isAnswered').removeClass('fail').removeClass('timeout');
	$(this).hide();
	$.ajax({
		type: "GET",
		url: '<?php echo $baseurl?>off_play/get_question',
		success: function(data){
			sessionStorage.question_db = data;
			//console.log(data);return false;
			var json = JSON.parse(data);
			console.log(json);
			var cau_hoi_1 = JSON.parse(json[0].content);
			sessionStorage.id_question = JSON.parse(json[0].id);
			$(".quest").html(parseInt(sessionStorage.count) +1);
    		$("#cauhoi").html('<span>'+stripslashes(cau_hoi_1.question)+'</span>');
    		$("#dapan1").html('<span>'+stripslashes(cau_hoi_1.choice[1])+'</span>');
    		$("#dapan2").html('<span>'+stripslashes(cau_hoi_1.choice[2])+'</span>');
    		$("#dapan3").html('<span>'+stripslashes(cau_hoi_1.choice[3])+'</span>');
    		$("#dapan4").html('<span>'+stripslashes(cau_hoi_1.choice[4])+'</span>');
                
                
			//console.log(cau_hoi_1);
			setTimeout(function(){
			audio2.loop = true;
			audio2.play();
			$("#main-page").show();
			$('.ketqua span').each(function(){
                  if($(this).width() > 228)
                  {
                    $(this).css({
                        'white-space': 'initial',
                        'font-size': '16px',
                        'line-height': '30px'
                    });
                  }
             });
			$('#count-down').html(time_downcount+"s");
			countdown = setInterval(function(){time_downcount--; count_time(time_downcount)},1000);
			//count_time(time_downcount);
			},3000);
			
		}
	});
});

$(".ketqua").click(function(){
	audio2.pause();  // click vào 1 trong 4 phương án
	audio3.play();
	if( !$('#main-page').hasClass('block') && !$('#main-page').hasClass('fail') && !$('#main-page').hasClass('timeout')){
		var cl = $(this);
		jConfirm('<center>Đây đã phải là đáp án cuối cùng của bạn chưa ?</center>', 'Thông báo', function(r) {
		if(r == true)
		{ 
	
			$('#main-page').addClass('isAnswered');
			//$('#main-page').removeClass('click');
			var kq = cl.attr('id').replace('dapan','');
			$.ajax({
				type: "GET",
				url: '<?php echo $baseurl?>off_play/check_answer',
				data:({ id: sessionStorage.id_question, choice : kq }),
				success: function(data){
				//console.log(data);return false;
				var j = JSON.parse(data);
					if( j.status == 200 ){
						audio4.play() // trả lời đúng
						cl.addClass('green');
						$('#main-page').addClass('block');
						$('#main-page').addClass('true');
						//alert(parseInt(sessionStorage.count) +1);
						if( parseInt(sessionStorage.count) == 14 ){  // fix tong so cau
							showResult(j.current_scores); return false;
						}
						
						clearInterval(countdown);
						time_downcount = config_answer_time;
						
						setTimeout(function(){
							audio2.loop = true; // câu hỏi mới 
							audio2.play();
							$('#main-page').addClass('wait3s');
							
							//countdown = setInterval(function(){time_downcount--; count_time(time_downcount)},1000);
							nextQuestion();
							$("#ico-time").html("Điểm "+j.current_scores);
						},3000);
						
					}else{
						audio6.play();
						clearInterval(countdown);
						cl.addClass('red');
						$('#dapan'+data).addClass('green');
						$('#main-page').addClass('block');
						$('#main-page').addClass('fail');
						sessionStorage.id_question = 0;
						setTimeout(function(){
							jConfirm('<center>Bạn đã trả lời sai, phần chơi của bạn đã kết thúc<br/>Bạn có muốn trở về trang chủ không?</center>', 'Thông báo', function(r) {
							if(r == true)
							{
								window.location.assign("<?php echo $baseurl;?>account.html");
							}
							});
						},2000);
						
					}
				}
			}); 
		}
		
		});
		return false;
	}else{
		if( $('#main-page').hasClass('fail')){
			jConfirm('<center>Bạn đã trả lời sai, phần chơi của bạn đã kết thúc<br/>Bạn có muốn trở về trang chủ không?</center>', 'Thông báo', function(r) {
							if(r == true)
							{
								window.location.assign("<?php echo $baseurl;?>account.html");
							}
							});
		}else if ($('#main-page').hasClass('block')){
			jAlert('<center>Bạn đã trả lời câu hỏi này</center>', 'Thông báo');
		}else if($('#main-page').hasClass('timeout')){
			jConfirm('<center>Đã hết thời gian trả lời, phần chơi của bạn đã kết thúc<br/>Bạn có muốn trở về trang chủ không?</center>', 'Thông báo', function(r) {
			if(r == true)
			{
				window.location.assign("<?php echo $baseurl;?>account.html");
			}
			});
		}
		
		return false;
	}	
	
});

function nextQuestion(){
	
	$('#main-page').removeClass('isAnswered').removeClass('wait3s');
	$('#main-page').removeClass('timeout');
	if($('#main-page').hasClass('true'))
	{
		$('#main-page').removeClass('block');
		$('#main-page').removeClass('true');
	}
	if( $(".ketqua").hasClass("green") ){
		$(".ketqua").removeClass("green");
	}
	
	$('#count-down').html(time_downcount+"s");

	
	countdown = setInterval(function(){time_downcount--; count_time(time_downcount)},1000);
	
	sessionStorage.count++;
	var json = JSON.parse(sessionStorage.question_db);
	var cau_hoi = JSON.parse(json[sessionStorage.count].content);
	sessionStorage.id_question = JSON.parse(json[sessionStorage.count].id);
	$(".quest").html(parseInt(sessionStorage.count) +1);
	$("#ico-quest").html("Đúng "+parseInt(sessionStorage.count));
		$("#cauhoi").html('<span>'+stripslashes(cau_hoi.question)+'</span>');
		$("#dapan1").html('<span>'+stripslashes(cau_hoi.choice[1])+'</span>');
		$("#dapan2").html('<span>'+stripslashes(cau_hoi.choice[2])+'</span>');
		$("#dapan3").html('<span>'+stripslashes(cau_hoi.choice[3])+'</span>');
		$("#dapan4").html('<span>'+stripslashes(cau_hoi.choice[4])+'</span>');

    $('.ketqua span').each(function(){
          if($(this).width() > 228)
          {
            $(this).css({
                'white-space': 'initial',
                'font-size': '16px',
                'line-height': '30px'
            });
          }
     });
}

function showResult(scores){
	
	setTimeout(function(){
		$("#main-page").hide();
		jAlert('<center>Chúc mừng bạn đã hoàn thành 15 câu hỏi với số điểm '+scores+'</center>', 'Thông báo');
	},1000);
		setTimeout(function(){
		$("#main-page").hide();
		window.location.assign("<?php echo $baseurl;?>account.html");
	},6000);
		

	return false;
}
</script>